<template>
  <div class="month-sales-volume-show">
    <div class="page-header">
      <h2>月度销量详情</h2>
      <a-button @click="goBack">返回列表</a-button>
    </div>
    
    <div class="content-wrapper">
      <a-card title="月度销量概览" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="统计月份">
            {{ volumeData.month || '暂无数据' }}
          </a-descriptions-item>
          <a-descriptions-item label="总销量">
            <span class="text-blue-600 font-bold">{{ volumeData.totalVolume || 0 }} 件</span>
          </a-descriptions-item>
          <a-descriptions-item label="环比增长">
            <a-tag :color="volumeData.growth >= 0 ? 'green' : 'red'">
              {{ volumeData.growth >= 0 ? '+' : '' }}{{ volumeData.growth || 0 }}%
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="销量目标">
            {{ volumeData.target || 0 }} 件
          </a-descriptions-item>
          <a-descriptions-item label="目标完成率">
            <a-progress 
              :percent="volumeData.completionRate || 0" 
              :status="(volumeData.completionRate || 0) >= 100 ? 'success' : 'active'"
            />
          </a-descriptions-item>
          <a-descriptions-item label="平均单价">
            ¥{{ volumeData.averagePrice || 0 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="产品销量排行" :bordered="false" class="mt-4">
        <a-table :columns="volumeColumns" :data-source="productVolumeData" :pagination="false" size="middle">
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'rank'">
              <a-tag :color="getRankColor(index + 1)">{{ index + 1 }}</a-tag>
            </template>
          </template>
        </a-table>
      </a-card>

      <a-card title="销量分析" :bordered="false" class="mt-4">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic title="日均销量" :value="analysisData.dailyAverage" suffix="件" :precision="0" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="最高单日销量" :value="analysisData.maxDaily" suffix="件" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="最低单日销量" :value="analysisData.minDaily" suffix="件" />
          </a-col>
          <a-col :span="6">
            <a-statistic title="销售天数" :value="analysisData.salesDays" suffix="天" />
          </a-col>
        </a-row>
      </a-card>

      <a-card title="区域销量分布" :bordered="false" class="mt-4">
        <a-table :columns="regionColumns" :data-source="regionData" :pagination="false" size="middle" />
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const volumeData = ref({
  month: '2024年11月',
  totalVolume: 25000,
  growth: 12.5,
  target: 24000,
  completionRate: 104.2,
  averagePrice: 50
});

const productVolumeData = ref([
  { key: '1', productName: '中华香烟', volume: 9000, percentage: 36, trend: 15.2 },
  { key: '2', productName: '玉溪香烟', volume: 8000, percentage: 32, trend: 8.5 },
  { key: '3', productName: '红塔山香烟', volume: 5600, percentage: 22.4, trend: -2.1 },
  { key: '4', productName: '云烟香烟', volume: 2400, percentage: 9.6, trend: 5.8 }
]);

const analysisData = ref({
  dailyAverage: 806,
  maxDaily: 1200,
  minDaily: 450,
  salesDays: 31
});

const regionData = ref([
  { key: '1', region: '华东地区', volume: 8500, percentage: 34, growth: 18.5 },
  { key: '2', region: '华南地区', volume: 6200, percentage: 24.8, growth: 12.3 },
  { key: '3', region: '华北地区', volume: 5800, percentage: 23.2, growth: 8.7 },
  { key: '4', region: '西南地区', volume: 4500, percentage: 18, growth: 15.2 }
]);

const volumeColumns = [
  { title: '排名', key: 'rank', width: 80 },
  { title: '产品名称', dataIndex: 'productName', key: 'productName' },
  { title: '销量', dataIndex: 'volume', key: 'volume' },
  { title: '占比', dataIndex: 'percentage', key: 'percentage' },
  { title: '环比趋势', dataIndex: 'trend', key: 'trend' },
];

const regionColumns = [
  { title: '销售区域', dataIndex: 'region', key: 'region' },
  { title: '销量', dataIndex: 'volume', key: 'volume' },
  { title: '占比', dataIndex: 'percentage', key: 'percentage' },
  { title: '增长率', dataIndex: 'growth', key: 'growth' },
];

const getRankColor = (rank: number) => {
  if (rank === 1) return 'gold';
  if (rank === 2) return 'silver';
  if (rank === 3) return 'bronze';
  return 'default';
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  const id = route.params.id;
  console.log('月度销量ID:', id);
});
</script>

<style scoped>
.month-sales-volume-show {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #1890ff;
}

.content-wrapper {
  background: #f5f5f5;
  min-height: calc(100vh - 200px);
}

.mt-4 {
  margin-top: 16px;
}

.text-blue-600 {
  color: #2563eb;
}

.font-bold {
  font-weight: bold;
}
</style>

